<template>
    <view class="content" :style="{ height: windowHeight + 'px' }">
        <view class="zanwu" v-if="courseList.length == 0">暂无数据</view>
        <view class="course_items" v-for="(item, index) in courseList" :key="index" @click="toClick(item.id)">
            <image :src="item.titleImageUrl" alt=""></image>
            <view class="titles">
                <view class="recommend" v-if="item.recommend == 1">
                    推荐
                </view>
                <text class="describe">
                    {{ item.title }}
                </text>
            </view>
            <view class="bottom">
                <view class="bottom_left">
                    <image src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776375504_2ca00d91/eye.png?x-oss-process=image/resize,w_300" alt=""></image>
                    <text>
                        {{ item.hits }}
                    </text>
                </view>
                <view class="bottom_right">
                    立即学习
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import config from '@/config/config.js'
import { systemInfo } from '../../utils/mixin'
import { listPopularize } from '@/api/index.js'
export default {
    components: {},
    mixins: [systemInfo],
    data() {
        return {
            courseList: [],
        }
    },
    async onLoad(options) {
        // 状态栏高度
        this.getSystemInfo();

        uni.setNavigationBarTitle({
            title: options.title
        })

        // 获取科普列表
        const res = await listPopularize({
            pageNum: 1,
            pageSize: 10,
            type: options.title
        })
        res.rows.forEach(element => {
            element.titleImageUrl = config.pic_prefix + element.titleImage
        });
        this.courseList = res.rows
    },
    methods: {
        // 立即学习
        toClick(id) {
            uni.navigateTo({
                url: "/subpackage1/classification/classificationDetails?id=" + id
            })
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    text-align: center;
    background-color: rgb(245, 245, 245);
    padding-bottom: 35rpx;
    width: 100%;
    box-sizing: border-box;

    .zanwu {
        width: 100%;
        padding-top: 100rpx;
        text-align: center;
        font-size: 30rpx;
        color: rgb(179, 173, 173);
    }


    .course_items {
        width: calc(100vw - 70rpx);
        margin: auto;
        margin-bottom: 40rpx;
        background-color: #fff;
        box-sizing: border-box;
        padding: 35rpx;
        overflow: auto;
        border-radius: 15px;

        image {
            width: 318px;
            height: 161px;
            border-top-left-radius: 30rpx;
            border-bottom-right-radius: 30rpx;
        }

        video {
            width: 100%;
            height: 180rpx;
        }

        .titles {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 20rpx;

            .recommend {
                display: inline-block;
                width: 60rpx;
                height: 30rpx;
                background-color: rgb(249, 0, 0);
                color: #fff;
                font-size: 16rpx;
                text-align: center;
                line-height: 30rpx;
                letter-spacing: 2rpx;
                border-top-right-radius: 15rpx;
                border-bottom-right-radius: 15rpx;
                margin-right: 10rpx;
            }

            .describe {
                font-size: 26rpx;
                line-height: 30rpx;
                letter-spacing: 2rpx;
            }

        }
    }

    .bottom {
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        justify-content: space-between;

        .bottom_left {
            display: flex;
            align-items: center;
            color: rgb(179, 173, 173);
            font-size: 20rpx;

            image {
                width: 18rpx;
                height: 14rpx;
                margin-right: 5rpx;
            }
        }

        .bottom_right {
            width: 135rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            color: #fff;
            background-color: rgb(64, 149, 229);
            border-radius: 6rpx;
            font-size: 24rpx;
            letter-spacing: 3rpx;
        }
    }
}
</style>
